<template>
	<view class="wrap">
		<view class="tips">为了便于审核，需要您如实填写</view>
		<view class="cell">
			<view class="cell-header">企业法人信息</view>
			<view class="cell-item">
				<view class="cell-item_L">企业法人姓名</view>
				<view class="cell-item_R">
					<input v-model="juridicalPerson" type="text" placeholder-style="color:#ccc" placeholder="请输入企业法人姓名">
				</view>
			</view>
			<view class="cell-item">
				<view class="cell-item_L">身份证号</view>
				<view class="cell-item_R">
					<input type="text" v-model="cardNumber" placeholder-style="color:#ccc" placeholder="请输入企业法人身份证号码">
				</view>
			</view>
			<view class="cell-item upload">
				<view class="cell-item_L">上传身份证</view>
				<view class="cell-item_R">
					<view class="uploadImg">
						<g-upload-add @change="onUploadChange($event, 'cardFront')">
							<image v-if="cardFront" :src="cardFront"></image>
							<image v-else src="../../static/images/icon-idcard.png"></image>
						</g-upload-add>
					</view>
					<view class="uploadImg">
						<g-upload-add @change="onUploadChange($event, 'cardReverse')">
							<image v-if="cardReverse" :src="cardReverse"></image>
							<image v-else src="../../static/images/icon-idcard-back.png"></image>
						</g-upload-add>
					</view>
				</view>
			</view>
			<view class="cell-item upload" style="padding-bottom: 30rpx;">
				<view class="cell-item_L">上传法人照片</view>
				<view class="cell-item_R">
					<view class="uploadImg">
						<g-upload-add @change="onUploadChange($event, 'juridicalPersonPhoto')">
							<image v-if="juridicalPersonPhoto" :src="juridicalPersonPhoto"></image>
							<image v-else src="../../static/images/icon-upload-avatar.png"></image>
						</g-upload-add>
					</view>
				</view>
			</view>
		</view>
		<view class="cell" :style="{marginBottom: pageType == 'add' ? '20rpx' : '0rpx'}">
			<view class="cell-header" style="border-bottom: 0;">企业信息</view>
			<view class="cell-item upload" style="margin-top: -20rpx;">
				<view class="cell-item_L">上传营业执照</view>
				<view class="cell-item_R">
					<view class="uploadImg">
						<g-upload-add @change="onUploadChange($event, 'license')">
							<image v-if="license" :src="license"></image>
							<image v-else src="../../static/images/icon-upload-yyzz.png"></image>
						</g-upload-add>
					</view>
				</view>
			</view>
			<view class="cell-item upload" style="border-bottom: 1px solid #f2f2f2;padding-bottom: 30rpx;">
				<view class="cell-item_L">上传企业logo</view>
				<view class="cell-item_R">
					<view class="uploadImg">
						<g-upload-add @change="onUploadChange($event, 'logoImg')">
							<image v-if="logoImg" :src="logoImg"></image>
							<image v-else src="../../static/images/icon-upload-logo.png"></image>
						</g-upload-add>
					</view>
				</view>
			</view>
			<view class="cell-item">
				<view class="cell-item_L">企业信用代码</view>
				<view class="cell-item_R">
					<input v-model="creditCode" type="text" placeholder-style="color:#ccc" placeholder="请输入企业信用代码">
				</view>
			</view>
			<view class="cell-item">
				<view class="cell-item_L">店铺名称</view>
				<view class="cell-item_R">
					<input v-model="name" type="text" placeholder-style="color:#ccc" placeholder="请输入店铺名称">
				</view>
			</view>
			<view class="cell-item" @click="showScopeFlag = true">
				<view class="cell-item_L">经营范围</view>
				<view class="cell-item_R app_arrow">
					<block v-if="listRange.length > 0">
						{{listRange[listRangeIndex].dictLabel}}
					</block>
				</view>
			</view>
			<view class="cell-item" @click="showCateFlag = true">
				<view class="cell-item_L">经营类目</view>
				<view class="cell-item_R app_arrow">
					<block v-if="listCategory.length > 0">
						{{listCategory[listCategoryIndex].dictLabel}}
					</block>
				</view>
			</view>
			<view class="cell-item">
				<view class="cell-item_L">档口地址</view>
				<view class="cell-item_R">
					<input v-model="address" type="text" placeholder-style="color:#ccc" placeholder="请输入档口地址">
				</view>
			</view>
			<view class="cell-item">
				<view class="cell-item_L">仓库地址</view>
				<view class="cell-item_R">
					<input v-model="repositoryAddress" type="text" placeholder-style="color:#ccc" placeholder="请输入仓库地址">
				</view>
			</view>
			<view class="cell-item">
				<view class="cell-item_L">公司电话</view>
				<view class="cell-item_R">
					<input v-model="telephone" type="text" placeholder-style="color:#ccc" placeholder="请输入电话">
				</view>
			</view>
			<!-- <view class="cell-item">
				<view class="cell-item_L">传真</view>
				<view class="cell-item_R">
					<input type="text" placeholder-style="color:#ccc" placeholder="请输入传真">
				</view>
			</view> -->
			<view class="cell-item" :class="{bbottom: pageType === 'edit'}" @click="onSkipTap('addBankCard')">
				<view class="cell-item_L">银行卡信息</view>
				<view class="cell-item_R app_arrow">
					{{bankName?bankName:'编辑'}}
				</view>
			</view>
		</view>
		<view class="cell bottomCell" v-if="pageType === 'add'">
			<view class="cell-header">账号设置</view>
			<view class="cell-item">
				<view class="cell-item_L">手机号码</view>
				<view class="cell-item_R">
					<input v-model="phone" type="number" placeholder-style="color:#ccc" placeholder="请输入手机号">
				</view>
			</view>
			<view class="cell-item">
				<view class="cell-item_L">验证码</view>
				<view class="cell-item_R code">
					<input v-model="code" type="number" placeholder-style="color:#ccc" placeholder="请输入验证码">
					<view class="getCode" @click="getCode">{{isCountDown ? `${time}s` : '获取验证码'}}</view>
				</view>
			</view>
			<view class="cell-item">
				<view class="cell-item_L">设置密码</view>
				<view class="cell-item_R">
					<input v-model="password" type="password" placeholder-style="color:#ccc" placeholder="请设置登录密码">
				</view>
			</view>
			<view class="cell-item">
				<view class="cell-item_L">确认密码</view>
				<view class="cell-item_R">
					<input v-model="confirmPassword" type="password" placeholder-style="color:#ccc"
						placeholder="请再次输入密码确认">
				</view>
			</view>
		</view>
		<view class="btn">
			<g-btn v-if="pageType === 'add'" title="申请入驻" @click="onConfirmTap"></g-btn>
			<g-btn v-if="pageType === 'edit'" title="提交修改" @click="onConfirmTap"></g-btn>
		</view>

		<u-popup v-model="showScopeFlag" mode="bottom" border-radius="16">
			<view class="pop">
				<view class="pop-header">
					<text>选择经营范围</text>
					<image @click.stop="showScopeFlag = false" class="pop-close"
						src="../../static/images/icon-pop-close.png"></image>
				</view>
				<scroll-view class="pop-list" scroll-y="true">
					<view class="pop-item" :class="{active: index == tempListRangeIndex}"
						v-for="(item, index) in listRange" :key="index" @click="tempListRangeIndex = index">
						{{item.dictLabel}}
					</view>
				</scroll-view>
				<g-btn @click="listRangeIndex = tempListRangeIndex,showScopeFlag=false"></g-btn>
			</view>
		</u-popup>
		<u-popup v-model="showCateFlag" mode="bottom" border-radius="16">
			<view class="pop">
				<view class="pop-header">
					<text>选择经营类目</text>
					<image @click.stop="showCateFlag = false" class="pop-close"
						src="../../static/images/icon-pop-close.png"></image>
				</view>
				<scroll-view class="pop-list" scroll-y="true">
					<view class="pop-item" :class="{active: index == tempListCategoryIndex}"
						v-for="(item, index) in listCategory" :key="index" @click="tempListCategoryIndex = index">
						{{item.dictLabel}}
					</view>
				</scroll-view>
				<g-btn @click="listCategoryIndex = tempListCategoryIndex,showCateFlag=false"></g-btn>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let timer = null
	export default {
		data() {
			return {
				requestUrl: '',
				pageType: 'add',
				showScopeFlag: false,
				showCateFlag: false,
				juridicalPerson: '', // 法人姓名
				cardNumber: '', // 法人身份证号
				cardFront: '', // 身份证-正面
				cardReverse: '', // 身份证-背面
				juridicalPersonPhoto: '', // 法人照片
				license: '', // 公司营业执照
				logoImg: '', // 店铺LOGO
				creditCode: '', // 企业信用代码
				name: '', // 店铺名称
				scope: '', // 经营范围(1,2,3)
				category: '', // 经营类型(1,2,3)
				address: '', // 档口地址
				repositoryAddress: '', // 仓库地址
				telephone: '', // 公司电话
				userId: '', // 用户ID
				phone: '', // 账号设置块里的手机号
				code: '', // 验证码
				password: '',
				confirmPassword: '',
				storeId: '',
				bankName: '', // 银行卡名称
				cardNo: '', // 银行卡号
				cardholderName: '', // 持卡人姓名

				listCategoryIndex: 0,
				tempListCategoryIndex: 0,
				listCategory: [],
				listRangeIndex: 0,
				tempListRangeIndex: 0,
				listRange: [],
				isCountDown: false,
				time: 60,
				bankcarList: [] // 银行卡列表
			}
		},
		onLoad(options) {
			this.setPageType(options.pageType)
			this.getShopListCategory()
			this.getShopListRange()
			this.requestUrl = this.$g_config.requestUrl
			if (options.pageType === 'edit') {
				this.$store.dispatch('updateUserInfo').then(() => {
					let gShopInfo = this.gShopInfo
					this.juridicalPerson = gShopInfo.juridicalPerson || '' // 法人姓名
					this.cardNumber = gShopInfo.cardNumber || '' // 法人身份证号
					this.cardFront = gShopInfo.cardFront || '' // 身份证-正面
					this.cardReverse = gShopInfo.cardReverse || '' // 身份证-背面
					this.juridicalPersonPhoto = gShopInfo.juridicalPersonPhoto || '' // 法人照片
					this.license = gShopInfo.license || '' // 公司营业执照
					this.logoImg = gShopInfo.logoImg || '' // 店铺LOGO
					this.creditCode = gShopInfo.creditCode || '' // 企业信用代码
					this.name = gShopInfo.name || '' // 店铺名称
					this.scope = gShopInfo.scope || '' // 经营范围(1,2,3)
					this.category = gShopInfo.category || '' // 经营类型(1,2,3)
					this.address = gShopInfo.address || '' // 档口地址
					this.repositoryAddress = gShopInfo.repositoryAddress || '' // 仓库地址
					this.telephone = gShopInfo.telephone || '' // 公司电话
					this.storeId = gShopInfo.id
					this.bankName = gShopInfo.bankName || ''
					this.cardNo = gShopInfo.cardNo || ''
					this.cardholderName = gShopInfo.cardholderName || ''
					this.getBankList()
				})
			}
		},
		onUnload() {
			uni.$off('updateBankCard', this.updateBankCardInfo)
		},
		methods: {
			setPageType(pageType) {
				const pageTypeObj = {
					add: '申请入驻',
					edit: '店铺信息'
				}
				this.pageType = pageType || 'add'
				uni.setNavigationBarTitle({
					title: pageTypeObj[pageType] || '申请入驻'
				})
			},
			onSkipTap(type, index) {
				const urlObj = {
					addBankCard: () => {
						uni.$off('updateBankCard', this.updateBankCardInfo)
						uni.$on('updateBankCard', this.updateBankCardInfo)
						if (this.pageType === 'add') {
							uni.navigateTo({
								url: '/pages/wallet/addBankCardForApply'
							})
						} else if (this.pageType === 'edit') {
							uni.navigateTo({
								url: '/pages/wallet/addBankCard'
							})
						}

					},
					success: () => {
						if (this.pageType === 'add') {
							uni.navigateTo({
								url: '/pages/apply/success'
							})
						} else if (this.pageType === 'edit') {
							uni.showToast({
								title: '信息审核中'
							})
						}
					},
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			getBankList() {
				this.$g_api.bankcarList({
					pageNum: 1,
					pageSize: 1000,
				}).then(({
					rows,
					totalPage
				}) => {
					this.bankcarList = rows
					console.log(rows);
				})
			},
			updateBankCardInfo(params) {
				this.bankName = params.bankName
				this.cardNo = params.cardNumber
				this.cardholderName = params.name
			},
			// async getShopInfo() {
			// 	if (this.pageType !== 'edit') return
			// 	try {
			// 		await this.$store.dispatch('updateUserInfo')
			// 		const shopInfo = JSON.parse(JSON.stringify(this.gShopInfo))
			// 		this.juridicalPerson = shopInfo.xxx // 法人姓名
			// 		this.cardNumber = shopInfo.xxx // 法人身份证号
			// 		this.cardFront = shopInfo.xxx // 身份证-正面
			// 		this.cardReverse = shopInfo.xxx // 身份证-背面
			// 		this.juridicalPersonPhoto = shopInfo.xxx // 法人照片
			// 		this.license = shopInfo.xxx // 公司营业执照
			// 		this.logoImg = shopInfo.xxx // 店铺LOGO
			// 		this.creditCode = shopInfo.xxx // 企业信用代码
			// 		this.name = shopInfo.xxx // 店铺名称
			// 		this.scope = shopInfo.xxx // 经营范围(1,2,3)
			// 		this.category = shopInfo.xxx // 经营类型(1,2,3)
			// 		this.address = shopInfo.xxx // 档口地址
			// 		this.repositoryAddress = shopInfo.xxx // 仓库地址
			// 		this.telephone = shopInfo.xxx // 公司电话
			// 	} catch (e) {
			// 		//TODO handle the exception
			// 	}
			// },
			getShopListCategory() {
				this.$g_api.shopListCategory().then(({
					data
				}) => {
					this.listCategory = data
				})
			},
			getShopListRange() {
				this.$g_api.shopListRange().then(({
					data
				}) => {
					this.listRange = data
				})
			},
			onUploadChange(e, type) {
				console.log(e);
				console.log(type);
				this[type] = e
			},
			async onConfirmTap() {
				try {
					let params = await this.checkParams()
					console.log(params);
					// return
					if (this.pageType === 'add') {
						this.$g_api.shopApplyShop(params).then(({
							data
						}) => {
							this.onSkipTap('success')
						})
					} else if (this.pageType === 'edit') {
						this.$g_api.shopEditShop(params).then(({
							data
						}) => {
							this.onSkipTap('success')
						})
					}
				} catch (e) {
					console.log(e);
					uni.showToast({
						title: e,
						icon: 'none'
					})
				}
			},
			getCode() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
					})
					return
				}
				if (!this.$verificationPhone.test(this.phone)) {
					uni.showToast({
						title: '请输入正确手机号码',
						icon: 'none',
					})
					return
				}
				this.countDown()
				this.$g_api.commonSendCode({
					tel: String(this.phone)
				}).then(({
					data
				}) => {
					this.countDown()
				})
			},
			countDown() {
				this.isCountDown = true
				clearInterval(timer)
				timer = setInterval(() => {
					if (--this.time == 0) {
						this.isCountDown = false
						this.time = 60
						clearInterval(timer)
					}
				}, 1000)
			},
			async checkParams() {
				let {
					address,
					repositoryAddress,
					cardFront,
					cardNumber,
					cardReverse,
					category,
					creditCode,
					juridicalPerson,
					juridicalPersonPhoto,
					license,
					logoImg,
					name,
					scope,
					telephone,
					userId,
					phone,
					code,
					password,
					confirmPassword,
					storeId,
					bankName,
					cardNo,
					cardholderName,
				} = this
				if (!juridicalPerson) return Promise.reject('请输入法人姓名')
				if (!cardNumber) return Promise.reject('请输入身份证号')
				if (!cardFront) return Promise.reject('请上传身份证')
				if (!cardReverse) return Promise.reject('请上传身份证')
				if (!juridicalPersonPhoto) return Promise.reject('请上传法人照片')
				if (!license) return Promise.reject('请上传营业执照')
				if (!logoImg) return Promise.reject('请上传企业logo')
				if (!creditCode) return Promise.reject('请输入企业信用代码')
				if (!name) return Promise.reject('请输入店铺名称')
				if (!this.listRange[this.listRangeIndex]?.dictLabel) return Promise.reject('请选择经营范围')
				if (!this.listCategory[this.listCategoryIndex]?.dictLabel) return Promise.reject('请选择经营类目')
				if (!address) return Promise.reject('请输入档口地址')
				if (!repositoryAddress) return Promise.reject('请输入仓库地址')
				if (!telephone) return Promise.reject('请输入公司电话')
				if (this.pageType === 'edit') {
					if (!this.bankcarList || this.bankcarList.length === 0) return Promise.reject('请添加银行卡信息')
				} else {
					if (!cardNo || !bankName || !cardholderName) return Promise.reject('请添加银行卡信息')
				}
				license = license.replace(this.$g_config.requestUrl, '')
				logoImg = logoImg.replace(this.$g_config.requestUrl, '')
				cardReverse = cardReverse.replace(this.$g_config.requestUrl, '')
				cardFront = cardFront.replace(this.$g_config.requestUrl, '')
				juridicalPersonPhoto = juridicalPersonPhoto.replace(this.$g_config.requestUrl, '')
				if (this.pageType === 'edit') {
					return Promise.resolve({
						id: storeId,
						address,
						repositoryAddress,
						cardFront,
						cardNumber,
						cardReverse,
						// cardNo,
						// bankName,
						// cardholderName,
						category: this.listCategory[this.listCategoryIndex].dictValue,
						creditCode,
						juridicalPerson,
						juridicalPersonPhoto,
						license,
						logoImg,
						name,
						scope: this.listRange[this.listRangeIndex].dictValue,
					})
				} else {
					if (!phone) return Promise.reject('请输入手机号码')
					if (!code) return Promise.reject('请输入验证码')
					if (!password) return Promise.reject('请输入密码')
					if (password !== confirmPassword) return Promise.reject('两次密码不一致')
					return Promise.resolve({
						address,
						repositoryAddress,
						cardFront,
						cardNumber,
						cardReverse,
						cardNo,
						bankName,
						cardholderName,
						category: this.listCategory[this.listCategoryIndex].dictValue,
						creditCode,
						juridicalPerson,
						juridicalPersonPhoto,
						license,
						logoImg,
						name,
						scope: this.listRange[this.listRangeIndex].dictValue,
						telephone,
						// userId,
						tel: phone,
						checkNum: code,
						password,
						resPassword: confirmPassword,
					})
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.tips {
		line-height: 80rpx;
		padding-left: 30rpx;
		font-size: 26rpx;
		color: #999;
	}

	.cell {
		margin-bottom: 20rpx;
		padding: 0 30rpx;
		overflow: hidden;
		background-color: #fff;
	}

	.cell-header {
		line-height: 108rpx;
		font-size: 36rpx;
		font-weight: bold;
		border-bottom: 1px solid #f2f2f2;
	}

	.cell-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 98rpx;
		border-bottom: 1px solid #f2f2f2;

		&:last-child {
			border-bottom: 0;
		}
	}

	.cell-item_L {
		line-height: 98rpx;
		font-size: 30rpx;

		&::before {
			content: '*';
			color: #ff7733;
		}
	}

	.cell-item_R {
		text-align: right;
		font-size: 30rpx;

		input {
			width: 400rpx;
		}
	}

	.upload {
		display: block;
		border-bottom: 0;

		.cell-item_R {
			display: flex;
			justify-content: space-between;
		}
	}

	.uploadImg {
		width: 334rpx;
		height: 280rpx;
		font-size: 0;

		image {
			border-radius: 0;
			width: 334rpx;
			height: 280rpx;
		}
	}

	.code {
		display: flex;
	}

	.getCode {
		margin-left: 20rpx;
		width: 156rpx;
		text-align: center;
		color: $g-main-color;
	}

	.btn {
		// margin-top: -19rpx;
		padding-top: 70rpx;
		padding-bottom: 50rpx;
		background-color: #fff;
		// width: 690rpx;
		// height: 90rpx;
		// line-height: 90rpx;
		// text-align: center;
		// font-size: 32rpx;
		// color: #fff;
		// background: linear-gradient(90deg, #3377FF, #6699FF);
		// box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(76, 136, 255, 0.5);
		// border-radius: 45rpx;
	}

	.bottomCell {
		// padding-bottom: 50rpx;
		margin-bottom: 0;

		.cell-item {
			&:last-child {
				border-bottom: 1px solid #f2f2f2;
			}
		}
	}

	.app_arrow {
		padding-right: 20rpx;
		color: #999;

		&::after {
			width: 14rpx;
			height: 14rpx;
			border-color: #999;
			right: 8rpx;
		}
	}

	.pop {
		padding-bottom: 30rpx;
	}

	.pop-header {
		position: relative;
		line-height: 90rpx;
		text-align: center;
	}

	.pop-close {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.pop-list {
		padding: 30rpx 16rpx 70rpx 30rpx;
	}

	.pop-item {
		display: inline-block;
		min-width: 220rpx;
		padding: 22rpx 30rpx;
		margin-bottom: 30rpx;
		line-height: 26rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		text-align: center;
		background: #f2f2f2;
		border-radius: 10rpx;
		margin-right: 16rpx;

		&.active {
			color: #4C88FF;
			border: 2rpx solid #4C88FF;
			background-color: #fff;
		}
	}

	.bbottom {
		border-bottom: 1px solid #f2f2f2 !important;
	}
</style>